<template>
  <div class="content_box">
    <p class="gl_fs_16 gl_ft_weight">个人信息</p>
    <div class="content">
      <el-row :gutter="10">
        <el-col :span="8">
          <span class="name">姓名：</span>
          <span>{{ registerInfo.name }}</span>
        </el-col>
        <el-col :span="8">
          <span class="name">证件类型：</span>
          <span>{{ registerInfo.idCardType && registerInfo.idCardType.name }}</span>
        </el-col>
        <el-col :span="8">
          <span class="name">单位团体会员：</span>
          <span>{{ trainningRegisterInfo.isOrganizationRegistered ? '是' : '否' }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <span class="name">国籍：</span>
          <span>{{ registerInfo.nationalityName }}</span>
        </el-col>
        <el-col :span="8">
          <span class="name">证件号：</span>
          <span>{{ registerInfo.idCardNumber }}</span>
        </el-col>
        <el-col :span="8">
          <span class="name">现任职务：</span>
          <span>{{ trainningRegisterInfo.presentPost }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <span class="name">出生日期：</span>
          <span>{{ registerInfo.birthDate | FormatDate('yyyy-MM-dd') }}</span>
        </el-col>
        <el-col :span="8">
          <span class="name">手机号：</span>
          <span>{{ registerInfo.phoneNumber }}</span>
        </el-col>
        <el-col v-if="trainningRegisterInfo.provinceCode || trainningRegisterInfo.cityCode || trainningRegisterInfo.countyCode || trainningRegisterInfo.mailingAddress" :span="8">
          <span class="name">邮寄地址：</span>
          <span>{{ trainningRegisterInfo.provinceName }} {{ trainningRegisterInfo.cityName }} {{ trainningRegisterInfo.countyName }} {{ trainningRegisterInfo.mailingAddress }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <span class="name">性别：</span>
          <span>{{ registerInfo.gender && registerInfo.gender.name }}</span>
        </el-col>
        <el-col :span="8">
          <span class="name">所在地区：</span>
          <span>{{ addressDataForCheck(registerInfo.provinceCode, registerInfo.cityCode, registerInfo.countyCode) }}</span>
        </el-col>
        <el-col :span="8">
          <span class="name">所在单位：</span>
          <span>{{ trainningRegisterInfo.organizationName }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <span class="name">详细地址：</span>
          <span>{{ registerInfo.address }}</span>
        </el-col>
      </el-row>
      <el-row v-if="registerInfo.idCardImage || registerInfo.idCardBackImage" :gutter="10">
        <el-col>
          <span class="name">证件信息：</span>
          <div class="idCard gl_dis_ib">
            <div v-if="registerInfo.idCardImage" class="img_box">
              <img :src="getStaticPhotoUrl(registerInfo.idCardImage)" alt="">
            </div>
            <div v-if="registerInfo.idCardBackImage" class="img_box">
              <img :src="getStaticPhotoUrl(registerInfo.idCardBackImage)" alt="">
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-divider v-if="isCTAMemberRequired && (registerInfo.parentTAProvinceCode || registerInfo.parentTACityCode || registerInfo.parentTACountyCode || registerInfo.ctaMemberStatusCode || registerInfo.ctaMemberExipry || registerInfo.ctkCode || registerInfo.ctaMemberImageUrl1)" />
    <div v-if="isCTAMemberRequired && (registerInfo.parentTAProvinceCode || registerInfo.parentTACityCode || registerInfo.parentTACountyCode || registerInfo.ctaMemberStatusCode || registerInfo.ctaMemberExipry || registerInfo.ctkCode || registerInfo.ctaMemberImageUrl1)" class="gl_fs_16 gl_ft_weight">会员信息</div>
    <div v-if="isCTAMemberRequired && (registerInfo.parentTAProvinceCode || registerInfo.parentTACityCode || registerInfo.parentTACountyCode || registerInfo.ctaMemberStatusCode || registerInfo.ctaMemberExipry || registerInfo.ctkCode || registerInfo.ctaMemberImageUrl1)" class="content">
      <el-row v-if="registerInfo.parentTAProvinceCode || registerInfo.parentTACityCode || registerInfo.parentTACountyCode || registerInfo.ctaMemberStatusCode">
        <el-col v-if="registerInfo.parentTAProvinceCode || registerInfo.parentTACityCode || registerInfo.parentTACountyCode" :span="6">
          <span class="name">所属协会：</span>
          <span>{{ addressDataForCheck(registerInfo.parentTAProvinceCode, registerInfo.parentTACityCode, registerInfo.parentTACountyCode) }}</span>
        </el-col>
        <el-col v-if="registerInfo.ctaMemberStatusCode" :span="8">
          <span class="name">中国跆协个人会员状态：</span>
          <span>
            <template v-for="ktem in dict.registerMemberStatus">
              {{ ktem.code === registerInfo.ctaMemberStatusCode ? ktem.value: '' }}
            </template>
          </span>
        </el-col>
      </el-row>
      <el-row v-if="registerInfo.ctaMemberExipry || registerInfo.ctaMemberId" :gutter="10">
        <el-col v-if="registerInfo.ctaMemberExipry" :span="6">
          <span class="name">中国跆协个人会员到期日：</span>
          <span>{{ registerInfo.ctaMemberExipry | FormatDate('yyyy-MM-dd') }}</span>
        </el-col>
        <el-col v-if="registerInfo.ctaMemberId" :span="8">
          <span class="name">中国跆协会员号：</span>
          <span>{{ registerInfo.ctaMemberId }}</span>
        </el-col>
      </el-row>
      <el-row v-if="registerInfo.ctaMemberImageUrl1" :gutter="10">
        <el-col>
          <span class="name">跆拳道会员证件：</span>
          <div class="idCard gl_dis_ib">
            <template v-for="index of 6">
              <div v-if="registerInfo['ctaMemberImageUrl' + index]" :key="index" class="img_box">
                <img :src="getStaticPhotoUrl(registerInfo['ctaMemberImageUrl' + index])" alt="">
              </div>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-divider v-if="isCTABeltRequired && (registerInfo.ctaBeltLevel || registerInfo.ctaBeltLevelId || registerInfo.ctaBeltLevelImageUrl1)" />
    <div v-if="isCTABeltRequired && (registerInfo.ctaBeltLevel || registerInfo.ctaBeltLevelId || registerInfo.ctaBeltLevelImageUrl1)" class="gl_fs_16 gl_ft_weight">中跆协级位信息</div>
    <div v-if="isCTABeltRequired && (registerInfo.ctaBeltLevel || registerInfo.ctaBeltLevelId || registerInfo.ctaBeltLevelImageUrl1)" class="content">
      <el-row :gutter="10">
        <el-col v-if="isCTABeltRequired" :span="4">
          <span class="name">中国跆协级位：</span>
          <span v-if="registerInfo.ctaBeltLevel">{{ registerInfo.ctaBeltLevel }}级</span>
          <span v-else>无</span>
        </el-col>
        <el-col v-if="registerInfo.ctaBeltLevelId" :span="8">
          <span class="name">中国跆协级位编号：</span>
          <span>{{ registerInfo.ctaBeltLevelId }}</span>
        </el-col>
      </el-row>
      <el-row v-if="registerInfo.ctaBeltLevelImageUrl1" :gutter="10">
        <el-col>
          <span class="name">中国跆协级位照片：</span>
          <div class="idCard gl_dis_ib">
            <template v-for="index of 6">
              <div v-if="registerInfo['ctaBeltLevelImageUrl' + index]" :key="index" class="img_box">
                <img :src="getStaticPhotoUrl(registerInfo['ctaBeltLevelImageUrl' + index])" alt="">
              </div>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-divider v-if="isCTABeltRequired && (registerInfo.ctaBeltDuan || registerInfo.ctaBeltDuanId || registerInfo.ctaBeltDuanImageUrl1)" />
    <div v-if="isCTABeltRequired && (registerInfo.ctaBeltDuan || registerInfo.ctaBeltDuanId || registerInfo.ctaBeltDuanImageUrl1)" class="gl_fs_16 gl_ft_weight">中跆协段位信息</div>
    <div v-if="isCTABeltRequired && (registerInfo.ctaBeltDuan || registerInfo.ctaBeltDuanId || registerInfo.ctaBeltDuanImageUrl1)" class="content">
      <el-row :gutter="10">
        <el-col v-if="isCTABeltRequired" :span="4">
          <span class="name">中国跆协段位：</span>
          <span v-if="registerInfo.ctaBeltDuan">{{ registerInfo.ctaBeltDuan }}段</span>
          <span v-else>无</span>
        </el-col>
        <el-col v-if="registerInfo.ctaBeltDuanId" :span="8">
          <span class="name">中国跆协段位编号：</span>
          <span>{{ registerInfo.ctaBeltDuanId }}</span>
        </el-col>
      </el-row>
      <el-row v-if="registerInfo.ctaBeltDuanImageUrl1" :gutter="10">
        <el-col>
          <span class="name">中国跆协段位照片：</span>
          <div class="idCard gl_dis_ib">
            <template v-for="index of 6">
              <div v-if="registerInfo['ctaBeltDuanImageUrl' + index]" :key="index" class="img_box">
                <img :src="getStaticPhotoUrl(registerInfo['ctaBeltDuanImageUrl' + index])" alt="">
              </div>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-divider v-if="isWTABeltRequired && (registerInfo.wtaBeltLevel || registerInfo.wtaBeltId || registerInfo.wtaBeltName || registerInfo.wtaBeltImageUrl1)" />
    <div v-if="isWTABeltRequired && (registerInfo.wtaBeltLevel || registerInfo.wtaBeltId || registerInfo.wtaBeltName || registerInfo.wtaBeltImageUrl1)" class="gl_fs_16 gl_ft_weight">国际跆拳道段位信息</div>
    <div v-if="isWTABeltRequired && (registerInfo.wtaBeltLevel || registerInfo.wtaBeltId || registerInfo.wtaBeltName || registerInfo.wtaBeltImageUrl1)" class="content">
      <el-row :gutter="10">
        <el-col v-if="isWTABeltRequired" :span="4">
          <span class="name">国际段位：</span>
          <span v-if="registerInfo.wtaBeltLevel">{{ registerInfo.wtaBeltLevel }}段</span>
          <span v-else>无</span>
        </el-col>
        <el-col v-if="registerInfo.wtaBeltId" :span="8">
          <span class="name">国际段位编号：</span>
          <span>{{ registerInfo.wtaBeltId }}</span>
        </el-col>
      </el-row>
      <el-row v-if="registerInfo.wtaBeltName" :gutter="10">
        <el-col>
          <span class="name">国际段位证书姓名(英文)：</span>
          <span>{{ registerInfo.wtaBeltName }}</span>
        </el-col>
      </el-row>
      <el-row v-if="registerInfo.wtaBeltImageUrl1" :gutter="10">
        <el-col>
          <span class="name">国际跆协段位信息：</span>
          <div class="idCard gl_dis_ib">
            <template v-for="index of 6">
              <div v-if="registerInfo['wtaBeltImageUrl' + index]" :key="index" class="img_box">
                <img :src="getStaticPhotoUrl(registerInfo['wtaBeltImageUrl' + index])" alt="">
              </div>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-divider v-if="trainningRegisterInfo.customFields && trainningRegisterInfo.customFields.length > 0" />
    <div v-if="trainningRegisterInfo.customFields && trainningRegisterInfo.customFields.length > 0" class="gl_fs_16 gl_ft_weight">其他信息</div>
    <div v-if="trainningRegisterInfo.customFields && trainningRegisterInfo.customFields.length > 0" class="content">
      <template v-for="item in trainningRegisterInfo.customFields">
        <el-row v-if="item.fieldTypeCode == 'Text'" :key="item.id" :gutter="10">
          <el-col>
            <span class="name">{{ item.name }}：</span>
            <span>{{ item.value }}</span>
          </el-col>
        </el-row>
        <el-row v-if="item.fieldTypeCode == 'Image'" :key="item.id" :gutter="10">
          <el-col>
            <span class="name">{{ item.name }}：</span>
            <div class="idCard gl_dis_ib">
              <div class="img_box">
                <img :src="getStaticPhotoUrl(item.value)" alt="">
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="item.fieldTypeCode == 'Attachment'" :key="item.id" :gutter="10">
          <el-col>
            <span class="name">{{ item.name }}：</span>
            <span><a class="entry" @click="openHref(item.value)">下载文件</a></span>
          </el-col>
        </el-row>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  name: 'MemberInfo',
  props: {
    registerInfo: {
      type: Object,
      default: () => {}
    },
    trainningRegisterInfo: {
      type: Object,
      default: () => {}
    },
    isCTABeltRequired: {
      type: Boolean,
      default: true
    },
    isWTABeltRequired: {
      type: Boolean,
      default: true
    },
    isCTAMemberRequired: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  created() {
    this.getDict();
    this.getDictByType(['district']);
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 处理省市区
    addressDataForCheck (_provinceCode, _cityCode, _countyCode) {
      let _provinceData;
      let _cityData;
      let _countyData;
      if (_provinceCode && this.cache.district) {
        _provinceData = this.cache.district.find(item => item.code === _provinceCode);
      }
      if (_cityCode && _provinceData) {
        _cityData = _provinceData.children.find(item => item.code === _cityCode);
      }
      if (_countyCode && _cityData) {
        _countyData = _cityData.children.find(item => item.code === _countyCode);
      }
      _provinceData = _provinceData ? _provinceData.name : '';
      _cityData = _cityData ? _cityData.name : '';
      _countyData = _countyData ? _countyData.name : '';
      return `${_provinceData} ${_cityData} ${_countyData}`;
    },
    openHref(value) {
      const href = this.getStaticPhotoUrl(value);
      window.open(href);
    },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      return relativeUrl ? WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl : '';
    }
  }
};
</script>

<style scoped>
.content_box {
  min-width: 960px;
  padding: 0px 36px 34px 36px;
}
.content_box p {
  margin-top: 40px;
}
.content {
  font-size: 14px;
  color: #595959;
  margin-top: 22px;
}
.content .name {
  color: #595959;
  font-weight: 600;
}
.content .el-row {
  margin-top: 24px;
}
.idCard {
  vertical-align: top;
  width: calc(100% - 130px);
}
.img_box {
  width: 287px;
  height: 181px;
  display: inline-block;
  margin-right: 40px;
}
.img_box img {
  width: 100%;
  height: 100%;
}
.entry {
  color: #1890ff;
}
.entry:focus, .entry:hover {
  text-decoration: underline;
}
</style>
